import { useRef, useEffect, useState } from 'react'
import './index.scss'
import useECharts from '@/utils/useECharts'
import { getSamplingApi } from '@/api'

function MovieRating() {
  const ratingRef = useRef(null)
  const [movieNameList, setMovieNameList] = useState([])
  const [ratingList, setRatingList] = useState([])

  useEffect(() => {
    const getSampling = async () => {
      const res = await getSamplingApi()
      const movieNameList = res.data.map(item => item.movie_name)
      setMovieNameList(movieNameList)
      const ratingList = res.data.map(item => item.rating_num)
      setRatingList(ratingList)
    }
    getSampling()
  }, [])

  const option = {
    tooltip: {
      trigger: 'item'
    },
    xAxis: [
      {
        type: 'category',
        axisTick: { show: false },
        data: movieNameList
      }
    ],
    yAxis: {
      max: 10,
      min: 0
    },
    series: [
      {
        name: '评分',
        symbolSize: 20,
        data: ratingList,
        type: 'scatter'
      }
    ]
  }

  useECharts(ratingRef, option)

  return (
    <>
      <div className="movie-rating">
        <h1>电影评分抽样</h1>
        <div id="rating" ref={ratingRef}></div>
      </div>
    </>
  )
}

export default MovieRating
